<template>
  <el-dialog style="width: 100%;height: 100%"
             :modal='true'
             :close-on-click-modal="false"
             :close-on-press-escape="false"
             width="580px"
             :visible.sync="visible"
             @close="canceldialog"
             :title="dataForm.id?'Edit Presentation':'New Presentation'"
             append-to-body>
    <el-form :model="dataForm"
             :rules="dataRules"
             :inline="false"
             ref="dataForm"
             label-width="180px"
             v-loading="loading"
             label-position="top">
      <el-form-item prop="name"
                    :label="$t('custom.dataset.name')">
        <el-input v-model="dataForm.name"
                  :placeholder="$t('custom.dataset.name')"
                  style="width: 98%;"></el-input>
      </el-form-item>
      <!-- <el-form-item prop="description"
                      :label="$t('custom.dataset.description')">
                <el-input v-model="dataForm.description"
                          :placeholder="$t('custom.dataset.description')" style="width: 98%;"></el-input>
              </el-form-item> -->
      <div style="margin-top:10px;margin-bottom: 50px;">
        <span style="float: left;">{{$t('custom.dataset.dashBoardList')}}</span>
        <!-- <span style="float: right;cursor: pointer;" @click="changeDashboard">{{dataForm.resourceList&&dataForm.resourceList.length>0?'Update Dashboard':'Add Dashboard'}}</span> -->
        <el-button size="mini"
                   type="primary"
                   style="float: right;"
                   @click="changeDashboard">{{'Add Dashboard'}}</el-button>
      </div>
      <div style="margin-top:10px;">
        <draggable handle=".mover"
                   filter=".edititem"
                   v-model="dataForm.resourceList"
                   chosenClass="chosen"
                   forceFallback="true"
                   animation="1000">
          <transition-group>
            <div class="item_drag"
                 v-for="(item,index) in dataForm.resourceList"
                 :key="item.sort">
              <el-card class="column-card">
                <el-row type="flex"
                        class="row-bg mover">
                  <el-col :span="24">
                    <el-tooltip content="Drag here to change the present order"
                                placement="top">
                      <span class="cuifont icon_navigation"
                            style="margin-right:10px;"></span>
                    </el-tooltip>
                    <span style="margin-right:10px;">{{item.resourceName}}</span>
                    <span class="cuifont icon_delete"
                          style="margin-right:10px;float: right;cursor:pointer;"
                          @click="removeResoure(index)"></span>
                  </el-col>
                </el-row>
              </el-card>
            </div>
          </transition-group>
        </draggable>
      </div>
    </el-form>
    <template slot="footer">
      <el-button size="small"
                 @click="canceldialog">{{ $t('cancel') }}</el-button>
      <el-button size="small"
                 type="primary"
                 @click="dataFormSubmitHandle()">{{ $t('custom.botStore.save') }}</el-button>
    </template>

  </el-dialog>
</template>
<script>
import draggable from 'vuedraggable'

export default {
  components: {
    draggable
  },
  data () {
    return {
      loading: false,
      visible: false,
      dataForm: {
        name: '',
        description: '',
        tenantCode: this.$store.state.user.tenantCode,
        creator: this.$store.state.user.id,
        resourceList: []

      },
      reportSelectList: []
    }
  },
  computed: {
    dataRules () {
      return {
        name: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur', pattern: '[^ \x22]+' }
        ]
      }
    }

  },
  watch: {
    reportSelectList (val) {
      if (val && val.length > 0) {
        let resLength = this.dataForm.resourceList ? this.dataForm.resourceList.length : 0
        if (this.dataForm.resourceList.length === 0) {
          this.dataForm.resourceList = []
        }
        for (let i = 0; i < val.length; i++) {
          const ele = val[i]
          this.dataForm.resourceList.push({
            resourceId: ele.resourceId,
            resourceName: ele.resourceName,
            sort: resLength + i + 1,
            collectionId: this.dataForm.id ? this.dataForm.id : null,
            createTime: null
          })
        }
        this.dataForm.resourceList = this._.uniqBy(this.dataForm.resourceList, 'resourceId')
        this.$forceUpdate()
      }
    }
  },
  created () {
    this.$root.eventBus.$on('reportSelectedList', (val) => {
      if (val && val.length > 0) this.reportSelectList = val
    })
  },
  methods: {
    init () {
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        if (this.dataForm.id) {
          this.getInfo()
        }
      })
    },
    getInfo () {
      this.loading = true
      const params = {
        id: this.dataForm.id
      }

      this.$interface.reports.getGroupInfo(params)
        .then(({ data: res }) => {
          if (!res) {
            return this.$message.error(res.msg)
          }
          this.dataForm = {
            ...this.dataForm,
            ...res.data
          }
          this.loading = false
        }).catch(() => { })
    },
    dataFormSubmitHandle () {
      this.verifyForm().then(() => {
        if (this.dataForm.resourceList.length === 0) {
          return this.$message.error('Please Select Dashboard')
        }
        for (let i = 0; i < this.dataForm.resourceList.length; i++) {
          const element = this.dataForm.resourceList[i]
          element.sort = i + 1
        }
        const params = {
          ...this.dataForm,
          tenantCode: this.$store.state.user.tenantCode,
          creator: this.$store.state.user.id
        }
        this.$interface.reports.saveOrUpdatePresentInfo(params).then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.$emit('refreshPresentList')
          this.canceldialog()
          this.$message.success(res.msg)
        }).catch(() => { })
      })
    },
    canceldialog () {
      if (this.$refs['dataForm']) {
        this.$refs['dataForm'].clearValidate()
      }
      this.dataForm = {
        name: '',
        description: '',
        tenantCode: this.$store.state.user.tenantCode,
        creator: this.$store.state.user.id,
        resourceList: []
      }
      this.visible = false
    },
    verifyForm () {
      return this.$refs['dataForm'].validate()
    },

    changeDashboard () {
      this.$emit('emitselectedgadgetPop')
    },
    removeResoure (index) {
      if (index === 0 && this.dataForm.resourceList.length === 1) {
        return
      }
      this.dataForm.resourceList.splice(index, 1)
      this.$forceUpdate()
    }
  },
  destroyed () {
    this.$root.eventBus.$off('reportSelectedList')
  }
}
</script>

<style scoped lang="scss">
</style>
